<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商弦路口指路牌生成器</title>
    <link href="../../Seniva/stylesheet.css" rel="stylesheet">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.7/umd.min.js"></script>
    <script src="https://sharonchoong.github.io/svg-exportJS/svg-export.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saverjs@1.3.6/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="lupai.js"></script>
    <style>
        .右对齐 {
            text-align: right;
        }
        .居中 {
            text-align: center;
        }
        .表格 input[type="text"] {
            margin: 1px;
            border: 1px solid #6f837a;
            overflow: hidden;
            height: inherit;
            width: inherit;
        }
        .表格 {
            border-collapse: collapse;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
        }
        .表格 th {
            border: 1px solid #6f837a;
            background-color: #6f837a;
            color: #fff;
        }
        .表格 td {
            border: 1px solid #6f837a;
            background-color: #dff3ea;
        }
    </style>
</head>

<body>
    <h1>商弦路口指路牌生成器</h1>
    <a href="..">◀ 返回上层</a>
    <p>
    <details>
        <summary class="label">查看说明</summary>
        <div class="card lab">
            <ul>
                <li>本生成器及生成的路牌由臤徘斯（Kinboise）原创，为商弦公路设计。</li>
                <li>输入路口信息，本生成器即可生成该路口四个方向的路口指路牌及道路名牌，并转换为png以便导入Minecraft。</li>
                <li>使用方法很直观，不再详述。</li>
                <li>使用字体：MiSans、IBM Plex Sans。设备上未安装则显示浏览器默认字体。</li>
            </ul>
        </div>
    </details>
    </p>
    <form name="格式">
    <p>
    <div class="label">格式设置</div>
    <div class="card lab">
        <figure>
            <table>
                <tr>
                    <td class="右对齐">背景色</td>
                    <td>
                        <input type="color" name="背景" value="#2e3192">
                    </td>
                    <td class="右对齐">景区色</td>
                    <td>
                        <input type="color" name="景区" value="#754c24">
                    </td>
                </tr>
                <tr>
                    <td class="右对齐">前景色</td>
                    <td>
                        <input type="color" name="前景" value="#ffffff">
                    </td>
                    <td class="右对齐">高速色</td>
                    <td>
                        <input type="color" name="高速" value="#147d3b">
                    </td>
                </tr>
            </table>
        </figure>
        <hr>
        <div>
            <input type="radio" name="方向词" checked value="帜和语">
            <label>帜和语方向词(FRPK)</label><br>
            <input type="radio" name="方向词" value="英语">
            <label>英语方向词(NESW)</label><br>
            <input type="radio" name="方向词" value="自定义">
            <label>自定义</label>
            <input name="自定义词" maxlength="4" style="width:4em" value="BDNX">
        </div>
    </div>
    </p>
    </form>
    <form name="信息">
        <p>
        <div class="card">
            <table>
                <tr>
                    <td class="右对齐">路口名称</td>
                    <td><input type="text" name="汉路口" value="张家井"></td>
                </tr>
                <tr>
                    <td class="右对齐">pleme a cafone</td>
                    <td><input type="text" name="拉路口" value="Dcanqovilipivebe"></td>
                </tr>
            </table>
        </div>
        </p>
        <p>
        <table class="表格">
            <tr>
                <th>方向</th>
                <th>北</th>
                <th>东</th>
                <th>南</th>
                <th>西</th>
            </tr>
            <tr>
                <th>形状</th>
                <td>
                    <select name="形北">
                        <option value="十字路口">十字路口</option>
                        <option value="左高右低">左高右低</option>
                        <option value="左低右高">左低右高</option>
                        <option value="前路偏左">前路偏左</option>
                        <option value="前路偏右">前路偏右</option>
                        <option value="环岛">环岛</option>
                        <option value="菱形桥上">菱形桥(高级道路,在上)</option>
                        <option value="菱形桥下">菱形桥(高级道路,在下)</option>
                        <option value="菱形桥低上">菱形桥(低级道路,在上)</option>
                        <option value="菱形桥低下">菱形桥(低级道路,在下)</option>
                        <option value="苜蓿桥上">苜蓿叶形桥(双出口,在上)</option>
                        <option value="苜蓿桥下">苜蓿叶形桥(双出口,在下)</option>
                        <option value="单苜蓿上">苜蓿叶形桥(单出口,在上)</option>
                        <option value="单苜蓿下">苜蓿叶形桥(单出口,在下)</option>
                        <option value="双漩涡桥上">漩涡形桥(双出口,在上)</option>
                        <option value="双漩涡桥下">漩涡形桥(双出口,在下)</option>
                        <option value="漩涡桥上">漩涡形桥(单出口,在上)</option>
                        <option value="漩涡桥下">漩涡形桥(单出口,在下)</option>
                        <option value="环岛桥上">环岛桥(在上)</option>
                        <option value="环岛桥下">环岛桥(在下)</option>
                        <option value="丁字路口左">丁字路口(前+左)</option>
                        <option value="丁字路口右">丁字路口(前+右)</option>
                        <option value="丁字路口前">丁字路口(左+右)</option>
                        <option value="三岔路口">三岔路口</option>
                        <option value="左长右短">左长右短</option>
                        <option value="右长左短">右长左短</option>
                        <option value="前短">左右长前短</option>
                    </select>
                </td>
                <td>
                    <select name="形东">
                        <option value="十字路口">十字路口</option>
                        <option value="左高右低">左高右低</option>
                        <option value="左低右高">左低右高</option>
                        <option value="前路偏左">前路偏左</option>
                        <option value="前路偏右">前路偏右</option>
                        <option value="环岛">环岛</option>
                        <option value="菱形桥上">菱形桥(高级道路,在上)</option>
                        <option value="菱形桥下">菱形桥(高级道路,在下)</option>
                        <option value="菱形桥低上">菱形桥(低级道路,在上)</option>
                        <option value="菱形桥低下">菱形桥(低级道路,在下)</option>
                        <option value="苜蓿桥上">苜蓿叶形桥(双出口,在上)</option>
                        <option value="苜蓿桥下">苜蓿叶形桥(双出口,在下)</option>
                        <option value="单苜蓿上">苜蓿叶形桥(单出口,在上)</option>
                        <option value="单苜蓿下">苜蓿叶形桥(单出口,在下)</option>
                        <option value="双漩涡桥上">漩涡形桥(双出口,在上)</option>
                        <option value="双漩涡桥下">漩涡形桥(双出口,在下)</option>
                        <option value="漩涡桥上">漩涡形桥(单出口,在上)</option>
                        <option value="漩涡桥下">漩涡形桥(单出口,在下)</option>
                        <option value="环岛桥上">环岛桥(在上)</option>
                        <option value="环岛桥下">环岛桥(在下)</option>
                        <option value="丁字路口左">丁字路口(前+左)</option>
                        <option value="丁字路口右">丁字路口(前+右)</option>
                        <option value="丁字路口前">丁字路口(左+右)</option>
                        <option value="三岔路口">三岔路口</option>
                        <option value="左长右短">左长右短</option>
                        <option value="右长左短">右长左短</option>
                        <option value="前短">左右长前短</option>
                    </select>
                </td>
                <td>
                    <select name="形南">
                        <option value="十字路口">十字路口</option>
                        <option value="左高右低">左高右低</option>
                        <option value="左低右高">左低右高</option>
                        <option value="前路偏左">前路偏左</option>
                        <option value="前路偏右">前路偏右</option>
                        <option value="环岛">环岛</option>
                        <option value="菱形桥上">菱形桥(高级道路,在上)</option>
                        <option value="菱形桥下">菱形桥(高级道路,在下)</option>
                        <option value="菱形桥低上">菱形桥(低级道路,在上)</option>
                        <option value="菱形桥低下">菱形桥(低级道路,在下)</option>
                        <option value="苜蓿桥上">苜蓿叶形桥(双出口,在上)</option>
                        <option value="苜蓿桥下">苜蓿叶形桥(双出口,在下)</option>
                        <option value="单苜蓿上">苜蓿叶形桥(单出口,在上)</option>
                        <option value="单苜蓿下">苜蓿叶形桥(单出口,在下)</option>
                        <option value="双漩涡桥上">漩涡形桥(双出口,在上)</option>
                        <option value="双漩涡桥下">漩涡形桥(双出口,在下)</option>
                        <option value="漩涡桥上">漩涡形桥(单出口,在上)</option>
                        <option value="漩涡桥下">漩涡形桥(单出口,在下)</option>
                        <option value="环岛桥上">环岛桥(在上)</option>
                        <option value="环岛桥下">环岛桥(在下)</option>
                        <option value="丁字路口左">丁字路口(前+左)</option>
                        <option value="丁字路口右">丁字路口(前+右)</option>
                        <option value="丁字路口前">丁字路口(左+右)</option>
                        <option value="三岔路口">三岔路口</option>
                        <option value="左长右短">左长右短</option>
                        <option value="右长左短">右长左短</option>
                        <option value="前短">左右长前短</option>
                    </select>
                </td>
                <td>
                    <select name="形西">
                        <option value="十字路口">十字路口</option>
                        <option value="左高右低">左高右低</option>
                        <option value="左低右高">左低右高</option>
                        <option value="前路偏左">前路偏左</option>
                        <option value="前路偏右">前路偏右</option>
                        <option value="环岛">环岛</option>
                        <option value="菱形桥上">菱形桥(高级道路,在上)</option>
                        <option value="菱形桥下">菱形桥(高级道路,在下)</option>
                        <option value="菱形桥低上">菱形桥(低级道路,在上)</option>
                        <option value="菱形桥低下">菱形桥(低级道路,在下)</option>
                        <option value="苜蓿桥上">苜蓿叶形桥(双出口,在上)</option>
                        <option value="苜蓿桥下">苜蓿叶形桥(双出口,在下)</option>
                        <option value="单苜蓿上">苜蓿叶形桥(单出口,在上)</option>
                        <option value="单苜蓿下">苜蓿叶形桥(单出口,在下)</option>
                        <option value="双漩涡桥上">漩涡形桥(双出口,在上)</option>
                        <option value="双漩涡桥下">漩涡形桥(双出口,在下)</option>
                        <option value="漩涡桥上">漩涡形桥(单出口,在上)</option>
                        <option value="漩涡桥下">漩涡形桥(单出口,在下)</option>
                        <option value="环岛桥上">环岛桥(在上)</option>
                        <option value="环岛桥下">环岛桥(在下)</option>
                        <option value="丁字路口左">丁字路口(前+左)</option>
                        <option value="丁字路口右">丁字路口(前+右)</option>
                        <option value="丁字路口前">丁字路口(左+右)</option>
                        <option value="三岔路口">三岔路口</option>
                        <option value="左长右短">左长右短</option>
                        <option value="右长左短">右长左短</option>
                        <option value="前短">左右长前短</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>道路类型</th>
                <td>
                    <select name="路北类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
                <td>
                    <select name="路东类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
                <td>
                    <select name="路南类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
                <td>
                    <select name="路西类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>道路名称</th>
                <td><input type="text" name="汉路北" value="甘城路"></td>
                <td><input type="text" name="汉路东" value="西先拂街"></td>
                <td><input type="text" name="汉路南" value="张家井大街"></td>
                <td><input type="text" name="汉路西" value="西先拂街"></td>
            </tr>
            <tr>
                <th>pleme a puto</th>
                <td><input type="text" name="拉路北" value="Sladizevo:puto"></td>
                <td><input type="text" name="拉路东" value="kokiSeonPhourl:puto"></td>
                <td><input type="text" name="拉路南" value="Dcanqovilipivebe:putumo"></td>
                <td><input type="text" name="拉路西" value="kokiSeonPhourl:puto"></td>
            </tr>
            <tr>
                <th>地点类型</th>
                <td>
                    <select name="点北类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区" selected>景区</option>
                    </select>
                </td>
                <td>
                    <select name="点东类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
                <td>
                    <select name="点南类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
                <td>
                    <select name="点西类">
                        <option value="一般">一般</option>
                        <option value="高速">高速</option>
                        <option value="景区">景区</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>通往地点</th>
                <td><input type="text" name="汉点北" value="光辉园(西门)"></td>
                <td><input type="text" name="汉点东" value="先拂天阶"></td>
                <td><input type="text" name="汉点南" value="中河湾"></td>
                <td><input type="text" name="汉点西" value="西麦仓"></td>
            </tr>
            <tr>
                <th>vine du viniza</th>
                <td><input type="text" name="拉点北" value="Posiploda (cine koke)"></td>
                <td><input type="text" name="拉点东" value="SeonPhourlnebibibore"></td>
                <td><input type="text" name="拉点南" value="Tavaputifosahure"></td>
                <td><input type="text" name="拉点西" value="Kokimajgipume"></td>
            </tr>
        </table>
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="路北类" value="常规" checked><label>常规</label>
                            <input type="radio" name="路北类" value="景区"><label>景区</label>
                            <input type="radio" name="路北类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="点北类" value="常规" checked><label>常规</label>
                            <input type="radio" name="点北类" value="景区"><label>景区</label>
                            <input type="radio" name="点北类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="路东类" value="常规" checked><label>常规</label>
                            <input type="radio" name="路东类" value="景区"><label>景区</label>
                            <input type="radio" name="路东类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="点东类" value="常规" checked><label>常规</label>
                            <input type="radio" name="点东类" value="景区"><label>景区</label>
                            <input type="radio" name="点东类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="路南类" value="常规" checked><label>常规</label>
                            <input type="radio" name="路南类" value="景区"><label>景区</label>
                            <input type="radio" name="路南类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="点南类" value="常规" checked><label>常规</label>
                            <input type="radio" name="点南类" value="景区"><label>景区</label>
                            <input type="radio" name="点南类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="路西类" value="常规" checked><label>常规</label>
                            <input type="radio" name="路西类" value="景区"><label>景区</label>
                            <input type="radio" name="路西类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
                    <!-- <tr>
                        <td colspan="2" class="居中">
                            <input type="radio" name="点西类" value="常规" checked><label>常规</label>
                            <input type="radio" name="点西类" value="景区"><label>景区</label>
                            <input type="radio" name="点西类" value="高速"><label>高速</label>
                        </td>
                    </tr> -->
        </p>
    </form>
    <p><button onclick="生成()" id="生成">生成</button></p>
    <p>
        <div id="预览区" hidden>
            <div class="label">路牌预览</div>
            <div class="card lab" id="预览"></div>
            <button onclick="下载全部()">下载全部png</button>
            <button onclick="下载全部svg()">下载全部svg</button>
        </div>
    </p>
</body>

</html>